/* OneTabBar
 * created by qinghong
 * 2016-7-11
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    TabBarIOS,
    View,
    Text,
    Navigator
} from 'react-native';

import Constants from '../Common/Constants';
import OneShareView from '../Common/OneShareView';

import Home      from './Home/Home';
import Articles  from './Article/Articles';
import Questions from './Question/Questions';
import Things    from './Things/Things';
import Me        from './Me/Me';

const TAB_HOME = 'tab_home';
const TAB_ARTICLES = 'tab_articles';
const TAB_QUESTIONS = 'tab_questions';
const TAB_THINGS = 'tab_things';
const TAB_ME = 'tab_me';

const TabBarItems = [
    {component: Home, title: '首页', icon: require('../images/home.png'), tabId: TAB_HOME},
    {component: Articles, title: '文章', icon: require('../images/article.png'), tabId: TAB_ARTICLES},
    {component: Questions, title: '问题', icon: require('../images/question.png'), tabId: TAB_QUESTIONS},
    {component: Things, title: '东西', icon: require('../images/thing.png'), tabId: TAB_THINGS},
    {component: Me, title: '个人', icon: require('../images/me.png'), tabId: TAB_ME}
];

export default class OneTabBar extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            selectedTabId: TAB_HOME,
            shareViewIsShown: false
        };
    }

    showShareView() {
        this.setState({
            shareViewIsShown: true
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <OneShareView shareViewIsShown={this.state.shareViewIsShown}/>
                <TabBarIOS
                    tintColor={Constants.tabBarTintColor}
                    barTintColor={Constants.tabBarBgColor}>
                    {
                        TabBarItems.map((controller, i) => {
                            let Component = controller.component;
                            return (
                                <TabBarIOS.Item
                                    key={i}
                                    title={controller.title}
                                    icon={controller.icon}
                                    selected={this.state.selectedTabId === controller.tabId}
                                    onPress={() => {this.setState({selectedTabId: controller.tabId})}}>
                                    <Component navigator={this.props.navigator} {...this.props}
                                               showShareViewAction={() => this.showShareView()}/>
                                </TabBarIOS.Item>
                            )
                        })
                    }
                </TabBarIOS>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Constants.colors.mainBgColor
    }
});

